<template>
  <div class="inobounce-box">
    <header class="header">
      <h1>iNoBounce</h1>
      <div>
        <button ref="toggle" id="iNoBounceToggle" class="button">
          Disable
        </button>
      </div>
    </header>
    <ul class="list scrollable">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
      <li>List Item 7</li>
      <li>List Item 8</li>
      <li>List Item 9</li>
      <li>List Item 10</li>
      <li>List Item 11</li>
      <li>List Item 12</li>
      <li>List Item 13</li>
      <li>List Item 14</li>
      <li>List Item 15</li>
      <li>List Item 16</li>
      <li>List Item 17</li>
      <li>List Item 18</li>
      <li>List Item 19</li>
      <li>List Item 20</li>
      <li>List Item 20</li>
      <li>List Item 21</li>
      <li>List Item 22</li>
      <li>List Item 23</li>
      <li>List Item 24</li>
      <li>List Item 25</li>
      <li>List Item 26</li>
      <li>List Item 27</li>
      <li>List Item 28</li>
      <li>List Item 29</li>
      <li>List Item 20</li>
      <li>List Item 30</li>
      <li>List Item 31</li>
      <li>List Item 32</li>
      <li>List Item 33</li>
      <li>List Item 34</li>
      <li>List Item 35</li>
      <li>List Item 36</li>
      <li>List Item 37</li>
      <li>List Item 38</li>
      <li>List Item 39</li>
      <li>List Item 40</li>
    </ul>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref } from "vue";

export default {
  name: "iNoBounce",
  setup() {
    const toggle = ref();
    var enabled = true;
    onMounted(() => {
      toggle.value.addEventListener(
        "click",
        function () {
          import("inobounce").then((iNoBounce) => {
            if (enabled) {
              iNoBounce.disable();
              toggle.value.classList.add("default");
              toggle.value.innerHTML = "Enable";
            } else {
              iNoBounce.enable();
              toggle.value.classList.remove("default");
              toggle.value.innerHTML = "Disable";
            }
            enabled = !enabled;
          });
        },
        false
      );
    });
    // let inobounceProxy = {};
    // onMounted(() => {
    //   let u = navigator.userAgent;
    //   if (u.indexOf("iPhone") > -1) {
    //     console.log("ios-----------------------");
    //     import("inobounce").then((inobounce) => {
    //       inobounceProxy = inobounce;
    //       console.log("inobounce:", inobounce);
    //       inobounce.enable();
    //     });
    //   }
    // });
    // onUnmounted(() => {
    //   let u = navigator.userAgent;
    //   if (u.indexOf("iPhone") > -1) {
    //     inobounceProxy.disable && inobounceProxy.disable();
    //   }
    // });

    return {
      toggle,
    };
  },
};
</script>

<style scoped lang="stylus">
.inobounce-box {
  font-size: .22rem;
  background-color: #fff;

  .scrollable {
    margin-top: 20px;
    height: 300px;
    overflow-y: auto;
    border: 1px solid cyan;
  }
}
</style>
